<template>
  <el-form ref="queryForm" :size="size" class="form-container">
    <div id="searchFilter" style="display: flex; justify-content: space-between;">
      <el-row type="flex">
        <el-col :span="20">
          <slot></slot>
        </el-col>
        <el-col :span="4">
          <el-form-item class="state-btn">
            <div class="state-handler">
              <el-button type="primary" size="small" @click="handleQuery">查询</el-button>
              <el-button size="small" @click="handleReset">重置</el-button>
              <el-button v-show="collapsiable" type="text" @click="shiftCollapsiable">
                <span>
                  {{ fold ? '收起' : '展开' }}
                  <i :class="fold ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                </span>
              </el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
  </el-form>
</template>
<script>
import { Form, FormItem, Button } from 'element-ui'
export default {
  name: 'SearchFilter',
  components: { Form, FormItem, Button },
  props: {
    // 最大展示数，默认3个，超过则隐藏，为0时不限制
    maxShow: {
      type: Number,
      default: 3,
    },
    size: {
      type: String,
      default: 'medium',
    },
  },
  data() {
    return {
      collapsiable: false,
      fold: false,
    }
  },
  created() {},
  mounted() {
    // 通过最大显示个数控制展开/折叠
    if (this.maxShow > 0) {
      this.minShowCtrol()
    }
  },
  methods: {
    shiftCollapsiable() {
      this.fold = !this.fold
      this.minShowCtrol()   
    },
    // 通过maxShow控制元素显示/折叠
    minShowCtrol() {
      const group = window.document.querySelectorAll(`#searchFilter .el-col-20 .el-form-item.el-form-item--${this.size}`)
      const len = group?.length
      if (this.maxShow < len) {
        group.forEach((item, index) => {
          if (index > this.maxShow - 1 && index < len) {
            item.hidden = !this.fold
          }
        })
        this.collapsiable = true
      } else {
        this.collapsiable = false
      }
    },
    handleQuery() {
      this.$emit('search')
    },
    handleReset() {
      console.log('!!')
      this.resetForm("queryForm");
      this.$emit('reset')
    },
  },
}
</script>
<style lang="scss" scoped>
#searchFilter {

  .el-row {
    width: 100%;
  }
  .state-btn {
    ::v-deep .el-form-item__content {
      margin-left: 0 !important;
    }
  }
  .state-handler {
    display: flex;
    justify-content: flex-end;
  }
}
</style>

